<template>
  <div
    v-for="singer in singerList"
    :key="singer.id"
    class="singer">
    <el-image
      @click="toArtist(singer.id, singer.score as string)"
      :src="singer.avatar"
      lazy />
    <span>{{ singer.name }}</span>
  </div>
</template>

<script lang="ts" setup>
import { Artist } from '../model';
import { useRouter } from 'vue-router';
import { getTheme } from '../utils/util';
import { inject } from 'vue';
const boxShadow = getTheme().get('shadow');
const color = getTheme().get('fontColor');
defineProps<{
  singerList: Artist[];
}>();
//设置隐藏滚动条
const hideScroll = inject('hideScroll') as Function;
//路由
const router = useRouter();
//点击跳转歌手详情
const toArtist = (id: string, score: string) => {
  hideScroll();
  router.push({
    name: 'artist',
    query: {
      id,
      score,
    },
  });
};
</script>

<style lang="less" scoped>
@font-color: v-bind(color);
@shadow: v-bind(boxShadow);
.singer {
  margin: 20px 8.5px 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  .el-image {
    width: 190px;
    height: 190px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: @shadow;
    cursor: pointer;
  }
  span {
    text-align: center;
    font-size: 15px;
    color: @font-color;
    margin-top: 5px;
    width: 185px;
    word-wrap: wrap;
  }
}
</style>
